<template>
  <div class="post-item" v-if="data"  @click="jumpDetails(data.id)">
    <slot name="header" />
    <div class="post-header" @click.stop="visitMember(data.member_id)" :class="{'roload-post-header':!show_time}">
      <van-image width="36px" height="36px" v-if="data.avatar || (data.has_one_stick_user&&data.has_one_stick_user.avatar)" round :src="data.avatar || data.has_one_stick_user.avatar"></van-image>
      <div v-else style="width: 2.25rem; height: 2.25rem;"></div>
      <div class="post-author">
        <div class="nick-name">{{ (data.nickname && String(data.nickname)) || (data.has_one_stick_user&&data.has_one_stick_user.nickname)  }}</div>
        <div class="post-created-time" v-if="show_time">{{ data.created_at }}</div>
      </div>
      <div class="post-operator">
        <slot name="operator" />
      </div>
    </div>
    <div class="post-body">
      <slot name="body" />
      <div class="post-title" >{{ data.title }}</div>
      <div  class="post-content-box">
        <p class="post-content" ref="PostContent" v-if="data.status==1||type=='micro'" style="display: block;">
          <span class="show-all" v-if="show_more">全文</span>
          <template v-if="isRichText(data.content || data.contents)">
            <span style="font-size: 0.9375rem;color: #00001C;" v-html="data.content || data.contents"></span>
          </template>
          <span style="font-size: 0.9375rem;color: #00001C;" v-else>{{data.content || data.contents}}</span>
        </p>
      </div>
      <slot name="content" />
      <div class="post-images" :class="[ postImagesClassName ]" v-if="data.status==1&&data.img">
        <van-image
          class="post-image-item"
          :src="img"
          radius="0.5rem"
          lazy-load
          v-for="(img,itemIndex) in images"
          :key="itemIndex"
          fit="cover"
        ></van-image>
        <div class="post-view-more" v-if="showViewMore">查看更多</div>
      </div>
      <div class="post-images" v-else-if="data.status==2&&data.img">
        <van-image class="post-image-item" :src="data.img" radius="0.5rem" lazy-load></van-image>
      </div>
       <div  v-if="type == 'micro'" class="post-images" :class="[ postImagesClassName ]" >
        <van-image
          class="post-image-item"
          :src="img.url"
          radius="0.5rem"
          lazy-load
          v-for="(img,itemIndex) in images"
          :key="itemIndex"
          fit="cover"
        ></van-image>
        <div class="post-view-more" v-if="showViewMore" >查看更多</div>
      </div>
      <slot name="body-bottom" />
    </div>
    <div class="post-footer">
      <slot name="footer" />
      <div class="post-circle" @click.stop="toCircle" v-if="showCircle&&circle&&data.circle_id">
        <van-image class="post-circle-icon" round :src="data.circle_img"></van-image>
        <span class="post-circle-name">{{ data.circle_name }}</span>
      </div>
      <ul class="post-statistics" v-if="type!=='micro'">
        <li class="post-statistics-item" v-if="type!=='micro'">
          <i class="post-statistics-icon iconfont icon-fontclass-yulan"></i>
          {{ data.browse_count }}
        </li>
        <li class="post-statistics-item" v-if="type!=='micro'">
          <i class="post-statistics-icon iconfont icon-fontclass-pinglun1"></i>
        </li>
      </ul>
      <ul v-else class="post-statistics-micro">
        <li v-if="hide_comment==0" style="display: flex;align-items: center;">
          <i class="iconfont icon-comment"></i>
          <span>{{data.comments_quantity || '评论'}}</span>
        </li>
        <li class="post-statistics-item" :class="{ 'post-statistics-item-active':data.is_like }" @click.stop="handle(data)">
           <template v-if="data.is_praised">
              <i  class="post-statistics-icon iconfont icon-zb_like"></i>
              <span>{{ data.praise_num ||  data.link_count }}</span>
            </template>
            <template v-else>
              <i class="post-statistics-icon iconfont icon-dianzan" ></i>{{data.praise_num==0?'赞':data.praise_num}}
            </template>
        </li>

      </ul>
      <slot name="bottom" />
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
export default {
  props: {
    data: {
      type: Object,
      default: ()=>({})
    },
    circle: {
      type: Boolean,
      default: true
    },
    showCircle: {
      type: Boolean,
      default: true
    },
    type:{
      type:String,
      default:""
    },
    show_time:{
      type:Boolean,
      default:true
    },
    hide_comment:{
      type:Number|String,
      default:1
    }
  },
  data() {
    return {
      postImagesClassName: "post-images-multi",
      images: [],
      showViewMore: false,
      show_more:false,
    };
  },
  mounted() {

    if (this.data.img) {
      if (this.data.img.length > 9) {
        this.images = this.data.img.slice(0, 9);
        this.showViewMore = true;
      } else if(this.data.img.length==1) {
        this.images = this.data.img;
        this.postImagesClassName="";
      }else{
        this.images = this.data.img;
      }
    }
    if (this.data.has_many_image ) {
      if (this.data.has_many_image.length > 9) {
        this.images = this.data.has_many_image.slice(0, 9);
        this.showViewMore = true;
      } else if(this.data.has_many_image.length==1) {
        this.images = this.data.has_many_image;
        this.postImagesClassName="";
      }else{
        this.images = this.data.has_many_image;
      }
    }
    this.init_content_height();
  },
  methods: {
    isRichText(str) {
      return /<[^<]+>/g.test(str);
    },
    init_content_height(){
      let _offsetHeight = this.$refs.PostContent.offsetHeight;
      let _scrollHeight = this.$refs.PostContent.scrollHeight;
      if(_offsetHeight<_scrollHeight){
          this.show_more = true;
      }
    },
    handle(data) {
      $http.post("plugin.micro-communities.api.trick.givePraise", { tid:data.id }).then(res => {
        if (res.result == 1) {
          this.$toast(res.msg);
          data.praise_num += 1;
          data.is_praised = true;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    jumpDetails(id=''){
      let stickId = id || this.data.id;
      if(this.type == 'micro'){
        this.$router.push(this.fun.getUrl("microCommentDetails", {stickId }));
      }
    },
    toCircle() {
      this.$router.push(this.fun.getUrl("circleDetails", {}, { id: this.data.circle_id  }));
    },
    visitMember(memberId) {
      if(this.type == 'micro'){
        this.jumpDetails()
      }else{
        this.$router.push(
          this.fun.getUrl(
            "circleMyRelease",
            {},
            {
              member_id: memberId
            }
          )
        );
      }
    }
  },
  components: {
    VanImage: Image
  }
};
</script>

<style scoped>
.post-item .show-all{
  /* width: 3.0625rem; */
  padding-right: 1.1875rem;
  /* margin-bottom: 10px; */
  float: right;
  clear: both;
  color:#466899;
  font-weight: 400;
  font-size: 0.9375rem;
}
.post-item {
  padding: 0.9375rem;
  text-align: left;
  background-color: white;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.625rem;
}

.roload-post-header {
  grid-template-columns: 2.5rem 7rem auto !important;
}

.post-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.post-author {
  display: flex;
  flex-direction: column;
  margin-left: 0.375rem;
}
.post-author .nick-name{
  font-weight: 500;
  font-size: 0.9375rem;
  color: #00001C;
}

.post-created-time {
  font-size: 0.75rem;
  color: #999;
  font-weight: 400;
}

.post-operator {
  justify-self: end;
}

.post-body {
  margin-top: 0.9375rem;
}
.post-content-box{
  display: flex;
  margin-top: 0.75rem;
}
.post-title {
  font-size: 0.9375rem;
  color: #00001C;
  font-weight: 500;
  word-break: break-all;
}
.post-content::before{
  content:"";
  float: right;
  height: calc(100% - 1.35rem);
}

.post-content {
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden; 
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #868585;
  max-height: 4.0625rem;
  box-sizing: border-box;
}

.post-images {
  margin-top: 0.75rem;
}

.post-images-multi {
  display: grid;
  grid-template-columns: repeat(3, 6.175rem);
  column-gap: 0.625rem;
  row-gap: 0.625rem;
  position: relative;
  padding: 0;
}

.post-image-item {
  display: block;
  width: 6.375rem;
  max-width: 60%;
  max-height: 15.625rem;
  border-radius: 0.5rem;
}

.post-images-multi .post-image-item {
  height: 6.175rem;
  max-height: unset;
  max-width: unset;
}

.post-view-more {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 6.175rem;
  line-height: 6.175rem;
  width: 6.1125rem;
  text-align: center;
  color: white;
  font-size: 0.875rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  cursor: pointer;
}

.post-footer {
  margin-top: 0.5rem;
}

.post-circle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.9375rem 0.25rem 0.25rem;
  color: #6d99f3;
  background-color: #f1f6ff;
  border-radius: 0.5rem;
}

.post-circle-icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.post-circle-name {
  margin-left: 0.25rem;
  max-width: 6.9375rem;
  overflow: hidden;
  font-size: 0.625rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-statistics {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.4375rem;
  font-size: 0.625rem;
  color: #7c7c7c;
}

.post-statistics-micro {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top:1.1875rem;
  font-size: 0.8125rem;
  color: #808080;
}

.post-statistics-micro .icon-comment,
.post-statistics-micro .icon-dianzan,
.post-statistics-micro .icon-zb_like{
  margin-right: 0.3125rem;
  font-size: 1.1875rem;
}
.post-statistics-micro .icon-zb_like{
  color:var(--themeBaseColor);
  font-size: 1.4063rem;
}

.post-statistics-item {
  margin-left: 0.8125rem;
  display: flex;
  align-items: center;
}

.post-statistics-item-active {
  color: #3175fe;
}
</style>